<template>
	<view class="content">
    <view class="leftMenu">
      <view v-for="list,index of classifyData" :key="index" class="list" :class="classifyDataValue===list.id?'active':''" @click="menuClick(list)">{{ list.title }}</view>
    </view>
    <scroll-view class="rightContBd" scroll-y="true" @scrolltolower="onReachBottom">
      <view class="rightCont">
        <view class="classList">
          <view v-for="list,index of twoClassifyData" :key="index" class="list" @click="rightListClick(list)">
            <image class="images" :src="list.image"></image>
            <text class="text">{{ list.title }}</text>
          </view>
        </view>
        <view class="title">商品列表</view>
        <view class="classList goodsList">
          <view v-for="list,index of goodsListData" :key="index" class="list" @click="commodityClick(list)">
            <image class="images" :src="list.logo"></image>
            <text class="text">{{ list.title }}</text>
          </view>
        </view>
      </view>
    </scroll-view>
	</view>
</template>

<script>
  import { getApi, postApi } from "@/api/index.js"
	export default {
		data() {
			return {
				title: 'Hello',
        queryData: '',
        classifyData: [],
        classifyDataValue: '',
        twoClassifyData: [],
        goodsListData: [],// 用于存放数据的数组
        page: 1, // 当前页数
        totalPage: 0, // 总页数
        isLoading: false // 是否正在加载数据
			}
		},
		onLoad() {
			// this.isFalse = true
      uni.setNavigationBarTitle({
        title: '分类' // 设置为你想要显示的标题文本
      })
			// const app = getApp();
			// this.queryData = app.globalData.someValue;
			// console.log(this.queryData)
			// 使用获取到的值
			this.init()
		},
    onShow() {
		},
		methods: {
      init(){
        let obj={
          pid: 0
        }
        this.loading = true
        postApi('/index/classify', obj).then(res => {
          if(res.code === 1){
            this.loading = false
            this.classifyData = res.data
            if(res.data.length > 0){
              if(this.queryData){
                this.classifyDataValue = this.queryData.id
              }else{
                this.classifyDataValue = res.data[0].id
              }
              this.twoInit()
              this.goodsInit()
            }
          }
        }).catch(err => {
          this.loading = false
        })
      },
      twoInit(){
        postApi('/index/classify', {
          pid: this.classifyDataValue
        }).then(res => {
          if(res.code === 1){
            this.loading = false
            this.twoClassifyData = res.data
          }
        }).catch(err => {
          this.loading = false
        })
      },
      goodsInit(){
        if (this.isLoading) return;
        this.isLoading = true;
        let obj={
          cate_id: this.classifyDataValue,
          page: this.page,
          limit: 10
        }
        this.loading = true
        postApi('/goods/goodsList', obj).then(res => {
          if(res.code === 1){
            this.loading = false
            this.totalPage = res.data.count;
            res.data.list.map((row) => {
              this.goodsListData.push(row)
            })
            this.page++;
            this.isLoading = false;
            // 是否为最后一页
            if (this.goodsListData.length >= res.data.count) {
              uni.showToast({
                title: '没有更多数据了',
                icon: 'none'
              })
            }
          }
        }).catch(err => {
          this.loading = false
        })
      },
      onReachBottom() {
        if (this.goodsListData.length <= this.totalPage && !this.isLoading) {
          this.goodsInit(); // 滚动到底部时加载更多数据
        }
      },
      menuClick(row){
        this.classifyDataValue = row.id
        this.twoInit()
        this.goodsListData = [],// 用于存放数据的数组
        this.page = 1, // 当前页数
        this.totalPage = 0, // 总页数
        this.isLoading = false // 是否正在加载数据
        this.goodsInit()
      },
      rightListClick(row){
        uni.navigateTo({
          url: `/pages/search/classificationSearch?id=`+row.id+`&title=`+row.title
        })
      },
      commodityClick(row){ // 跳转商品详情页，直播中则跳转直播url
        uni.navigateTo({
          url: `/pages/detail/detail?id=` + row.id
        })
      }
		}
	}
</script>

<style lang="scss" scoped>
.content {
  display: flex;
  height: 100vh;
  .leftMenu{
    width: 210rpx;
    height: 100%;
    background: #F8F8F8;
    overflow: auto;
    .list{
      position: relative;
      width: 100%;
      height: 76rpx;
      text-align: center;
      line-height: 76rpx;
      font-size: 28rpx;
      color: #000000;
    }
    .list.active{
      background: #FFFFFF;
      &::after{
        content: '';
        position: absolute;
        right: 0px;
        top: 0px;
        width: 6rpx;
        height: 46rpx;
        border-radius: 2rpx 2rpx 2rpx 2rpx;
        background: #74C4BC;
      }
    }
  }
  .rightContBd{
    width: calc(100% - 210rpx);
  }
  .rightCont{
    width: 100%;
    padding: 20rpx 10rpx 20rpx 30rpx;
    background: #fff;
    height: 100vh;
    // overflow: auto;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    box-sizing: border-box;
    .classList{
      display: flex;
      flex-wrap: wrap;
    }
    .list{
      margin-bottom: 20rpx;
      width: 47%;
      padding-right: 3%;
      float: left;
      .images{
        width: 100%;
        height: 236rpx;
        background: #AAAAAA;
      }
      .text{
        display: inline-block;
        width: 100%;
        margin: 10rpx 0;
        text-align: center;
      }
    }
    .title{
      text-align: center;
      font-size: 28rpx;
      font-weight: bold;
      margin-bottom: 20rpx;
    }
    .goodsList{
      .text{
        display: inline-block;
        width: 100%;
        margin: 10rpx 0;
        text-align: center;
        font-size: 24rpx;
        color: #000000;
        line-height: 32rpx;
        height: 96rpx;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
}
</style>
